<template>
  <div class="demo-title">popup/demo2</div>
  <Cell text="圆角+关闭按钮" :has-arrow="true" @click="radius.doPopup()" />
  <Cell text="标题+内容" :has-arrow="true" @click="title.doPopup()" />
  <Cell text="自定义内容" :has-arrow="true" @click="custom.doPopup()" />
  <Popup v-model:visible="radius.visible" height="300px" radius="10px" :close-icon="true" />
  <Popup v-model:visible="title.visible" height="300px" :title="title.title" :content="title.content" />
  <Popup v-model:visible="custom.visible" height="300px">
    <div class="custom-content">自定义内容放入&lt;slot&gt;中。。</div>
  </Popup>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Cell from '@sscd-mobile/cell'
  import Popup from '@sscd-mobile/popup'
  const radius = reactive({
    visible: false,
    height: '300px',
    doPopup: () => radius.visible = true
  })
  const title = reactive({
    visible: false,
    title: '这里是标题',
    content: '这里是内容。。这里是内容。。这里是内容。。这里是内容。。',
    doPopup: () => title.visible = true
  })
  const custom = reactive({
    visible: false,
    doPopup: () => custom.visible = true
  })
</script>

<style lang="less" scoped>
  .custom-content {
    font-weight: bold;
    color: red;
  }
</style>
